<template>
  <div id="write-pane">
    <el-container>
      <el-header class="title-pane" height="50px">
        <span class="title">写文章</span>
        <span></span>
      </el-header>
      <el-main>
        <div class="write-title-pane">
          <el-input
            size="large"
            class="write-title"
            v-model="title"
            placeholder="请输入标题"
          ></el-input>
        </div>
        <div class="tags-select-pane">
          <el-row>
            <el-col :span="8">
              <label>话题标签：</label>
              <tag-select ref="topicTags" kind="0" cat="0"></tag-select>
            </el-col>
            <el-col :span="8">
              <label>事件标签：</label>
              <tag-select ref="eventTags" kind="0" cat="1"></tag-select>
            </el-col>
            <el-col :span="8">
              <label>人物标签：</label>
              <tag-select ref="peopleTags" kind="0" cat="2"></tag-select>
            </el-col>
          </el-row>
        </div>

        <div class="write-editor-pane">
          <mavon-editor
            id="write-mavon-editor"
            v-model="content"
            placeholder="请输入正文..."
            :boxShadow="false"
          ></mavon-editor>
          <br />
          <el-button type="primary" @click="save">保存</el-button>
          <el-button @click="cancel()">取消</el-button>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import TagSelect from "@tools/TagSelect.vue";
import { MatKind } from "@js/constants.js";
export default {
  components: {
    TagSelect,
  },
  data() {
    return {
      id: this.$route.params.id,
      title: "",
      content: "",
    };
  },
  computed: {
    isEdit() {
      return !!this.id;
    },
  },
  watch: {
    kind: function (n, o) {
      console.log(o, "->", n);
    },
  },
  created() {
    if (this.isEdit) {
      // fetch article content
      this.authGet("/api/v1/mats/get/" + this.id).then((res) => {
        let article = res.data;
        this.title = article.title;
        this.content = article.content;
      });
    }
  },
  methods: {
    save() {
      if (!this.title) {
        this.$alert("标题未填写", "注意：");
      } else if (!this.content) {
        this.$alert("内容未填写", "注意：");
      } else {
        let url = "/api/v1/mats/add";
        let data = {
          title: this.title,
          kind: MatKind.Article,
          content: this.content,
          tags: this.getTags()
        };
        if (this.isEdit) {
          url = "/api/v1/mats/modify";
          data.id = Number(this.id);
        }
        this.authPost(url, data)
          .then(() => {
            this.$message("文章保存成功");
            this.goArticles();
          })
          .catch((error) => {
            this.$message("文章保存失败：" + error);
          });
      }
    },
    cancel() {
      if (this.title || this.content) {
        this.$confirm("文章未保存，确认退出？")
          .then(() => {
            this.goArticles();
          })
          .catch(() => {});
      } else {
        this.goArticles();
      }
    },
    goArticles() {
      this.$router.push("/works/articles");
    },
    getTags() {
      let topicTags = this.$refs.topicTags.tags;
      let peopleTags = this.$refs.peopleTags.tags;
      let eventTags = this.$refs.eventTags.tags;
      let tags = topicTags.concat(peopleTags).concat(eventTags);
      return tags;
    },
  },
};
</script>


<style lang="stylus" scoped>
#write-pane
  text-align left
  padding 0

  .title-pane
    border-bottom 1px solid #eee
    height 50px
    line-height 50px

    span.title
      font-weight bold
      font-size 1.2em

    span.right
      float right

  .write-title-pane
    margin-bottom 10px

  .tag-select-pane
    margin-bottom 20px

  .write-editor-pane
    margin-bottom 10px

    .v-note-wrapper
      z-index 1

  .write-kind-pane
    margin-bottom 10px

#write-mavon-editor
  min-height 500px
  max-height 650px
</style>